<template>
  <div>
    <h1>历史数据查询</h1>
    <div id="head">
      <el-tag effect="dark">
        选择导入的批次
      </el-tag>
      <el-select v-model="selectedId" placeholder="请选择批次" @change="getRecordById">
        <el-option
          v-for="(item,index) in recordIds"
          :key="index"
          :value="item"
        />
      </el-select>
      <el-tag effect="dark">
        选择显示的参数
      </el-tag>
      <el-select v-model="selectedColumn" placeholder="请选择显示的参数" @change="showSelected">
        <el-option
          v-for="(item,index) in column"
          :key="index"
          :value="item"
        />
      </el-select>
    </div>
    <div id="main" style="height:500px;width: 500px" />
    <el-upload
      id="upload"
      class="upload-demo"
      action="http://localhost:8013/api/transformer/fdsData/upload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      multiple
      :limit="3"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :headers="headers"
    >
      <el-button size="big" type="primary">导入数据</el-button>
      <div slot="tip" class="el-upload__tip">Tip:只能上传csv文件</div>
    </el-upload>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import * as echarts from 'echarts'

export default {
  name: 'History',
  data() {
    return {
      recordIds: [],
      selectedId: '',
      records: '',
      column: ['介质损耗因数', '复介电常数实部', '复介电常数虚部', '复电容实部', '复电容虚部'],
      selectedColumn: '',
      showData: [],
      fileList: [],
      headers: {
        'Authorization': getToken()
      }
    }
  },
  created() {
    this.getRecordsIds()
  },
  mounted() {
    this.drawCharts()
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    showSelected() {
      this.showData = []
      switch (this.selectedColumn) {
        case '介质损耗因数':
          for (const x in this.records) {
            this.showData.push(this.records[x]['tanDelta'])
          }
          break
        case '复介电常数实部':
          for (const x in this.records) {
            this.showData.push(this.records[x]['eReal'])
          }
          break
        case '复介电常数虚部':
          for (const x in this.records) {
            this.showData.push(this.records[x]['eImaginary'])
          }
          break
        case '复电容实部':
          for (const x in this.records) {
            this.showData.push(this.records[x]['cReal'])
          }
          break
        case '复电容虚部':
          for (const x in this.records) {
            this.showData.push(this.records[x]['cImaginary'])
          }
          break
      }
      this.drawCharts()
    },
    getRecordsIds() {
      var that = this
      var axios = require('axios')
      var config = {
        method: 'get',
        url: 'http://localhost:8013/api/transformer/fdsRecord/getIds',
        headers: {
          'Authorization': getToken()
        }
      }
      axios(config)
        .then(function(response) {
          that.recordIds = response.data
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    getRecordById() {
      this.selectedColumn = ''
      var that = this
      var axios = require('axios')
      var config = {
        method: 'get',
        url: 'http://localhost:8013/api/transformer/fdsData/' + this.selectedId,
        headers: {
          'Authorization': getToken()
        }
      }
      axios(config)
        .then(function(response) {
          that.records = response.data
          console.log(response.data)
        })
        .catch(function(error) {
          console.log(error)
        })
      this.showSelected()
      this.drawCharts()
    },
    drawCharts() {
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      myChart.resize({
        width: 1400,
        height: 500
      })
      var option
      option = {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: 'red' // 0% 处的颜色
          }, {
            offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        xAxis: {
          type: 'category',
          data: ['2021/12/1', '2021/12/2', '2021/12/3', '2021/12/4', '2021/12/5', '2021/12/6', '2021/12/7', '2021/12/8', '2021/12/9', '2021/12/10', '2021/12/11', '2021/12/12', '2021/12/13', '2021/12/14', '2021/12/15', '2021/12/16', '2021/12/17', '2021/12/18', '2021/12/19', '2021/12/20', '2021/12/21']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.showData,
            type: 'line',
            smooth: true,
            label: {
              show: false,
              position: 'bottom',
              textStyle: {
                fontSize: 10
              }
            },
            emphasis: {
              label: {
                show: true
              }
            }
          }
        ]
      }
      option && myChart.setOption(option)
    }
  }

}
</script>

<style scoped>
#head {
  position:absolute;
  left: 20%;
  top: 22%;
  width: 50%;
}
#main {
  position:absolute;
  top: 30%;
}
#upload{
  position:absolute;
  left: 65%;
  top: 20%;
}
h1{
position: relative;
left: 40%;
}
</style>
